<template>
    <div v-loading="loading">
        <tel-call-record :data="data" />
    </div>
</template>

<script>
    import { getCollectionDetail } from '@/api/collection'
    import TelCallRecord from '@/components/TelCallRecord'

    export default {
        name: 'CollectionCallRecord',
        components: { TelCallRecord },
        watch: {
            query () {
                this.loading = true
                const { id } = this.query
                getCollectionDetail(id, { method: 'CallRecord' }).then(res => {
                    const { result } = res
                    this.data = result
                }).finally(() => {
                    this.loading = false
                })
            }
        },
        data () {
            return {
                query: {},
                data: [],
                loading: false
            }
        },
        activated () {
            this.query = this.$route.query
        },
        created () {
            this.query = this.$route.query
        }
    }
</script>

<style scoped>

</style>
